<template>
  <div class="content">
    <div class="stars">
      <div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>
    </div>
    <!-- <div class="tip">
      <el-alert type="info" :closable="false" >
        <template #title>
          <el-link href="https://github.com/bradtraversy/50projects50days/tree/master" target="_blank" type="success">
            下方50个demo 源码地址,此页面为预览地址,点击可查看源码
          </el-link>
        </template>
      </el-alert>
    </div> -->
    <div class="table">
      <el-table :data="tableData" border height="650">
        <el-table-column type="index" width="50" label="#" />
        <el-table-column label="项目名称" width="180" >
          <template #default="{row}">
            <el-link :href="row.link"  :underline="false" target="_blank" type="primary">{{row.projectName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="难度(一星简单,五星困难)" width="180">
          <template #default="{row}">
            <el-rate v-model="row.difficulty" disabled />
          </template> 
        </el-table-column>
        <el-table-column label="技术栈" >
          <template #default="{row}">
            <el-text class="mx-1" type="success">{{row.skill}}</el-text>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-alert type="info" :closable="false" >
        <template #title>
          <el-link href="https://beian.miit.gov.cn/" target="_blank" type="success">鄂ICP备18008655号</el-link>
        </template>
      </el-alert>
    </div>
  </div>
</template>

<script setup name='HTML_DEMO'>
  import { onMounted, ref} from 'vue';
  /* 
   下方是实现背景星空顶效果的代码
  */
  const starsCount = 800;
  const distance = 800;
  const star = ref()
  onMounted(() =>{
    let starArr = star.value
    starArr.forEach(item => {
      let speed = 0.2 + (Math.random() * 1)
      let thisDistance = distance + (Math.random() * 300)
      item.style.transformOrigin = `0 0 ${thisDistance}px`
      item.style.transform =
        `translate3d(0, 0, -${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed}, ${speed})`
    })
  })
  /* 
    下方是 table 展示的代码
  */
  const tableData = [
    {
      projectName: 'Expanding Cards',
      difficulty:3,
      link: 'https://demo.f4ff.cn/expanding-cards/',
      skill: '前端三件套',
    },
    {
      projectName: 'Progress Steps',
      difficulty:3,
      link: 'https://demo.f4ff.cn/progress-steps/',
      skill: '前端三件套',
    },
    {
      projectName: 'Rotating Navigation Animation',
      difficulty:3,
      link: 'https://demo.f4ff.cn/rotating-nav-animation/',
      skill: '前端三件套',
    },
    {
      projectName: 'Hidden Search Widget',
      difficulty:3,
      link: 'https://demo.f4ff.cn/hidden-search/',
      skill: '前端三件套',
    },
    {
      projectName: 'Blurry Loading',
      difficulty:3,
      link: 'https://demo.f4ff.cn/blurry-loading/',
      skill: '前端三件套',
    },
    {
      projectName: 'Scroll Animation',
      difficulty:3,
      link: 'https://demo.f4ff.cn/scroll-animation/',
      skill: '前端三件套',
    },
    {
      projectName: 'Split Landing Page',
      difficulty:3,
      link: 'https://demo.f4ff.cn/split-landing-page/',
      skill: '前端三件套',
    },
    {
      projectName: 'Form Wave',
      difficulty:3,
      link: 'https://demo.f4ff.cn/form-input-wave/',
      skill: '前端三件套',
    },
    {
      projectName: 'Sound Board',
      difficulty:3,
      link: 'https://demo.f4ff.cn/sound-board/',
      skill: '前端三件套',
    },
    {
      projectName: 'Dad Jokes',
      difficulty:3,
      link: 'https://demo.f4ff.cn/dad-jokes/',
      skill: '前端三件套',
    },
    {
      projectName: 'Event Keycodes',
      difficulty:3,
      link: 'https://demo.f4ff.cn/event-keycodes/',
      skill: '前端三件套',
    },
    {
      projectName: 'Faq Collapse',
      difficulty:3,
      link: 'https://demo.f4ff.cn/faq-collapse/',
      skill: '前端三件套',
    },
    {
      projectName: 'Random Choice Picker',
      difficulty:3,
      link: 'https://demo.f4ff.cn/random-choice-picker/',
      skill: '前端三件套',
    },
    {
      projectName: 'Animated Navigation',
      difficulty:3,
      link: 'https://demo.f4ff.cn/animated-navigation/',
      skill: '前端三件套',
    },
    {
      projectName: 'Incrementing Counter',
      difficulty:3,
      link: 'https://demo.f4ff.cn/incrementing-counter/',
      skill: '前端三件套',
    },
    {
      projectName: 'Drink Water',
      difficulty:3,
      link: 'https://demo.f4ff.cn/drink-water/',
      skill: '前端三件套',
    },
    {
      projectName: 'Movie App',
      difficulty:3,
      link: 'https://demo.f4ff.cn/movie-app/',
      skill: '前端三件套',
    },
    {
      projectName: 'Background Slider',
      difficulty:3,
      link: 'https://demo.f4ff.cn/background-slider/',
      skill: '前端三件套',
    },
    {
      projectName: 'Theme Clock',
      difficulty:3,
      link: 'https://demo.f4ff.cn/theme-clock/',
      skill: '前端三件套',
    },
    {
      projectName: 'Button Ripple Effect',
      difficulty:3,
      link: 'https://demo.f4ff.cn/button-ripple-effect/',
      skill: '前端三件套',
    },
    {
      projectName: 'Drag N Drop',
      difficulty:3,
      link: 'https://demo.f4ff.cn/drag-n-drop/',
      skill: '前端三件套',
    },
    {
      projectName: 'Drawing App',
      difficulty:3,
      link: 'https://demo.f4ff.cn/drawing-app/',
      skill: '前端三件套',
    },
    {
      projectName: 'Kinetic Loader',
      difficulty:3,
      link: 'https://demo.f4ff.cn/kinetic-loader/',
      skill: '前端三件套',
    },
    {
      projectName: 'Content Placeholder',
      difficulty:3,
      link: 'https://demo.f4ff.cn/content-placeholder/',
      skill: '前端三件套',
    },
    {
      projectName: 'Sticky Navbar',
      difficulty:3,
      link: 'https://demo.f4ff.cn/sticky-navigation/',
      skill: '前端三件套',
    },
    {
      projectName: 'Double Vertical Slider',
      difficulty:3,
      link: 'https://demo.f4ff.cn/double-vertical-slider/',
      skill: '前端三件套',
    },
    {
      projectName: 'Toast Notification',
      difficulty:3,
      link: 'https://demo.f4ff.cn/toast-notification/',
      skill: '前端三件套',
    },
    {
      projectName: 'Github Profiles',
      difficulty:3,
      link: 'https://demo.f4ff.cn/github-profiles/',
      skill: '前端三件套',
    },
    {
      projectName: 'Double Click Heart',
      difficulty:3,
      link: 'https://demo.f4ff.cn/double-click-heart/',
      skill: '前端三件套',
    },
    {
      projectName: 'Auto Text Effect',
      difficulty:3,
      link: 'https://demo.f4ff.cn/auto-text-effect/',
      skill: '前端三件套',
    },
    {
      projectName: 'Password Generator',
      difficulty:3,
      link: 'https://demo.f4ff.cn/password-generator/',
      skill: '前端三件套',
    },
    {
      projectName: 'Good Cheap Fast',
      difficulty:3,
      link: 'https://demo.f4ff.cn/good-cheap-fast/',
      skill: '前端三件套',
    },
    {
      projectName: 'Notes App',
      difficulty:3,
      link: 'https://demo.f4ff.cn/notes-app/',
      skill: '前端三件套',
    },
    {
      projectName: 'Animated Countdown',
      difficulty:3,
      link: 'https://demo.f4ff.cn/animated-countdown/',
      skill: '前端三件套',
    },
    {
      projectName: 'Image Carousel',
      difficulty:3,
      link: 'https://demo.f4ff.cn/image-carousel/',
      skill: '前端三件套',
    },
    {
      projectName: 'Hoverboard',
      difficulty:3,
      link: 'https://demo.f4ff.cn/hoverboard/',
      skill: '前端三件套',
    },
    {
      projectName: 'Pokedex',
      difficulty:3,
      link: 'https://demo.f4ff.cn/pokedex/',
      skill: '前端三件套',
    },
    {
      projectName: 'Mobile Tab Navigation',
      difficulty:3,
      link: 'https://demo.f4ff.cn/mobile-tab-navigation/',
      skill: '前端三件套',
    },
    {
      projectName: 'Password Strength Background',
      difficulty:3,
      link: 'https://demo.f4ff.cn/password-strength-background/',
      skill: '前端三件套',
    },
    {
      projectName: '3d Background Boxes',
      difficulty:3,
      link: 'https://demo.f4ff.cn/3d-boxes-background/',
      skill: '前端三件套',
    },
    {
      projectName: 'Verify Account Ui',
      difficulty:3,
      link: 'https://demo.f4ff.cn/verify-account-ui/',
      skill: '前端三件套',
    },
    {
      projectName: 'Live User Filter',
      difficulty:3,
      link: 'https://demo.f4ff.cn/live-user-filter/',
      skill: '前端三件套',
    },
    {
      projectName: 'Feedback Ui Design',
      difficulty:3,
      link: 'https://demo.f4ff.cn/feedback-ui-design/',
      skill: '前端三件套',
    },
    {
      projectName: 'Custom Range Slider',
      difficulty:3,
      link: 'https://demo.f4ff.cn/custom-range-slider/',
      skill: '前端三件套',
    },
    {
      projectName: 'Netflix Mobile Navigation',
      difficulty:3,
      link: 'https://demo.f4ff.cn/netflix-mobile-navigation/',
      skill: '前端三件套',
    },
    {
      projectName: 'Quiz App',
      difficulty:3,
      link: 'https://demo.f4ff.cn/quiz-app/',
      skill: '前端三件套',
    },
    {
      projectName: 'Testimonial Box Switcher',
      difficulty:3,
      link: 'https://demo.f4ff.cn/testimonial-box-switcher/',
      skill: '前端三件套',
    },
    {
      projectName: 'Random Image Feed',
      difficulty:3,
      link: 'https://demo.f4ff.cn/random-image-generator/',
      skill: '前端三件套',
    },
    {
      projectName: 'Todo List',
      difficulty:3,
      link: 'https://demo.f4ff.cn/todo-list/',
      skill: '前端三件套',
    },
    {
      projectName: 'Insect Catch Game',
      difficulty:3,
      link: 'https://demo.f4ff.cn/insect-catch-game/',
      skill: '前端三件套',
    }
  ]

</script>

<style lang= 'scss' scoped>
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }

  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
.content{
  position: absolute;
  width: 100%;
  height: 100vh;
  min-height: 40vw;
  top: 0;
  left: 0;
  bottom: 0;
  background: radial-gradient(200% 100% at bottom center, #00040c, #001b51, #040059);
  background: radial-gradient(220% 105% at top center, #040059 10%, #28357d 40%, #001b51 65%, #040059);
  background-attachment: fixed;
  overflow: hidden;
  .stars {
    transform: perspective(500px);
    transform-style: preserve-3d;
    position: absolute;
    perspective-origin: 50% 100%;
    left: 50%;
    animation: rotate 90s infinite linear;
    bottom: 0;
    .star {
      width: 2px;
      height: 2px;
      background: #f7f7b8;
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden;
    }
  }
  .tip{
  width: 50%;
  margin: 0 auto;
  margin-top: 20px;
  }
  .table{
    width: 40%;
    margin: 0 auto;
    margin-top: 70px;
  }
  .footer{
    width: 50%;
    position: fixed;
    bottom: 0;
    left: 25%;
    
  }
  ::v-deep .el-alert--info{
      display: flex;
      justify-content: center;
    }
}
@media screen and (max-width: 750px) {
  .content{
    .table{
      width: 100%;
      margin-bottom: 20px ;
    }
    .footer{
      width: 100%;
      left: 0;
    }
  }
}
</style>